<template>
    <el-dialog
        v-model="dialogVisible"
        title="条件删除"
        width="500"
        :before-close="handleClose"
    >
        <el-form ref="queryFormRef" :model="queryParams" label-width="auto">
                <el-form-item label="号码" prop="number">
                    <el-input v-model="queryParams.number" type="text" placeholder="请输入名称" clearable/>
                </el-form-item>
                <el-form-item label="是否被获取" prop="acquired">
                    <el-select v-model="queryParams.acquired" placeholder="请选择" :clearable="true" filterable>
                        <el-option label="已被获取" :value="true"></el-option>
                        <el-option label="未被获取" :value="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="result">
                    <el-select v-model="queryParams.result" placeholder="请选择" :clearable="true" filterable>
                        <el-option label="成功" value="success"></el-option>
                        <el-option label="失败" value="fail"></el-option>
                        <el-option label="未知" value="unknown"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="国家" prop="country">
                    <el-select v-model="queryParams.country" placeholder="请选择" :clearable="true" filterable>
                        <el-option v-for="item in countriesList" :key="item.code" :label="item.name" :value="item.code">
                            <span class="flag-icon" :class="`flag-icon-${item.code.toLowerCase()}`"></span>
                            <span style="margin-left: 5px;">{{ item.name }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="批次" prop="groupId">
                    <el-select v-model="queryParams.groupId" placeholder="请选择" :clearable="true" filterable>
                        <el-option v-for="item, index in groupList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="短信状态" prop="remark">
                    <el-select v-model="queryParams.acquired" placeholder="请选择" :clearable="true" filterable>
                        <el-option label="已被获取" :value="true"></el-option>
                        <el-option label="未被获取" :value="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="起止时间" prop="times">
                    <el-date-picker
                       
                        style="width: 300px;"
                        v-model="queryParams.times"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    />
                </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getData as getDataCount, apiExport, delIds } from "@/api/equipmentManagement/numberManage/importNum.api";
import { getData as getGroupList } from "@/api/equipmentManagement/numberManage/grouping.api";
import useCountries from "@/hooks/useCountries";
const { countriesList, getCountryName } = useCountries()
import useToggle from "@/hooks/useToggle";
const [dialogVisible, , setDialogVisible] = useToggle();
const [loading, , setLoading] = useToggle();
import { ElLoading } from 'element-plus'

const emit = defineEmits(['refresh']);

const paging = ref({
    page: 1,
    size: 0,
    total: 0,
})

const queryParams = ref({
    app: void undefined,
    method: void undefined,
    number: void undefined,
    remark: void undefined,
    times: void undefined,
    country: void undefined,
    acquired: void undefined,
    groupId: void undefined,
    result: void undefined,
})

const appMethod = ref({})

const handleCancel = () => {
    setDialogVisible(false);
};

const submit = () => {
    ElMessageBox.confirm(
        '确定删除筛选出的数据?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delIds({ ...queryParams.value }).then(res => {
                emit('refresh');
                if (res == 0) return ElMessage({
                    type: 'error',
                    message: '删除0条数据',
                })
                ElMessage({
                    type: 'success',
                    message: '成功删除' + res + '条数据',
                })
            }).finally(() => {
                setDialogVisible(false);
            })
        })
}

const init = (query, types) => {
    queryParams.value = JSON.parse(JSON.stringify(query));
    appMethod.value = types;
    
    setDialogVisible(true);
    getGroupListData();
}

const groupList = ref([]);
const getGroupListData = async () => {
  const res = await getGroupList({ ...appMethod.value, page: 1, size: 1000 })
  groupList.value = res.rows;
}

defineExpose({
    init
})

</script>
